<!--
 * @Author: lujiangbo knight_lujb@163.com
 * @Date: 2024-04-11 14:58:18
 * @LastEditors: lujiangbo knight_lujb@163.com
 * @LastEditTime: 2024-10-20 12:29:58
 * @FilePath: /character-test/src/pages/components/CustomNav/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="tip-container">
    <img class="img-box" :src="icon_id" alt="">
    <div class="content-box">
      <div class="tip-box">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本平台不存在任何收费项目，请勿轻信广告内容，谨防诈骗</div>
    </div>
  </div>
</template>

<script lang="ts" setup name="CustomTip">
import icon_id from '@/assets/image/id.webp'
</script>

<style lang="scss" scoped>
.tip-container {
  position: fixed;
  left: 10vw;
  top: 50px;
  width: 80vw;
  height: 25px;
  background-image: linear-gradient(to right, #ff6b07, #ff382e);
  border-radius: 15px;
  display: flex;
  padding: 0 20px;
  align-items: center;

  .img-box {
    width: 12px;
    height: 12px;
  }

  .content-box {
    overflow: hidden;
    margin-left: 10px;

    .tip-box {
      font-size: 11px;
      color: #fff;
      white-space: nowrap;
      animation: scroll 10s linear infinite;
    }
  }

  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(-100%);
    }
  }
}
</style>